import QtQuick 2.0
import QtQuick.Shapes 1.14
import QtGraphicalEffects 1.14
import QtQuick.Extras 1.4
import Qt.labs.platform 1.1
import QtQuick.Controls 2.14
import QtQuick 2.14

Item {
   id:root
   implicitHeight: outControlBox.height
   implicitWidth: outControlBox.width

   Rectangle{
       id:outControlBox
       width: 300
       height: 300
       color: "transparent"

       //to right
       Shape{
           id: ctr_R
           anchors.fill: parent
           anchors.centerIn: parent
           anchors.leftMargin: 2
           //只有FillContains才会逐个路径判断
           //默认是BoundingRectContains根据矩形区域判断
           containsMode: Shape.FillContains
           layer.enabled: true
           layer.samples: 16
           layer.smooth: true
           antialiasing: true
           Image {
               sourceSize: Qt.size(300,300)
               source: "qrc:/img/right.svg"
               anchors.centerIn: parent
               anchors.horizontalCenterOffset: 6
               anchors.verticalCenterOffset: 3
           }

           ShapePath {
               capStyle: ShapePath.RoundCap
               joinStyle: ShapePath.RoundJoin
               strokeColor: "transparent"
               fillColor:"transparent"
               startX: 200
               startY: 100

               PathLine{
                  x:250
                  y:50
               }

               PathArc
               {
                   x: 250
                   y: 250
                   radiusX: 142
                   radiusY: 142
                   direction: PathArc.Clockwise
               }

               PathLine{
                  x:200
                  y:200
               }

               PathArc
               {
                   x: 200
                   y: 100
                   radiusX: 71
                   radiusY: 71
                   direction: PathArc.Counterclockwise
               }

               PathLine{
                  x:200
                  y:100
               }
           }

           MouseArea {
               id: mouse_area_R
               anchors.fill: parent
               containmentMask: ctr_R
               hoverEnabled: true
               onPressed: {
                   parent.scale +=.1
               }
               onReleased: {
                   parent.scale -= .1
               }
           }
       }

       //to bottom
       Shape{
           id: ctr_B
           anchors.fill: parent
           anchors.centerIn: parent
           anchors.topMargin: 2
           containsMode: Shape.FillContains
           layer.enabled: true
           layer.samples: 16
           layer.smooth: true
           antialiasing: true

           Image {
               source: "qrc:/img/bottom.svg"
               sourceSize: Qt.size(300,300)
               anchors.centerIn: parent
               anchors.horizontalCenterOffset: 7
               anchors.verticalCenterOffset: 3
           }

           ShapePath {
               capStyle: ShapePath.RoundCap
               joinStyle: ShapePath.RoundJoin
               //strokeWidth: 2
               //strokeColor: "red"
               strokeColor: "transparent"
               fillColor:"transparent"
               startX: 200
               startY: 200

               PathLine{
                  x:250
                  y:250
               }

               PathArc
               {
                   x: 50
                   y: 250
                   radiusX: 142
                   radiusY: 142
                   direction: PathArc.Clockwise
               }

               PathLine{
                  x:100
                  y:200
               }

               PathArc
               {
                   x: 200
                   y: 200
                   radiusX: 71
                   radiusY: 71
                   direction: PathArc.Counterclockwise
               }

               PathLine{
                  x:200
                  y:200
               }
           }

           MouseArea {
               id: mouse_area_B
               anchors.fill: parent
               containmentMask: ctr_B
               hoverEnabled: true
               onPressed: {
                   parent.scale +=.1
               }
               onReleased: {
                   parent.scale -= .1
               }
           }
       }

       //to left
       Shape{
           id: ctr_L
           anchors.fill: parent
           anchors.centerIn: parent
           anchors.leftMargin: -2
           containsMode: Shape.FillContains
           layer.enabled: true
           layer.samples: 16
           layer.smooth: true
           antialiasing: true

           Image {
               source: "qrc:/img/left.svg"
               sourceSize: Qt.size(300,300)
               anchors.centerIn: parent
               anchors.horizontalCenterOffset: 7
               anchors.verticalCenterOffset: 3
           }

           ShapePath {
               capStyle: ShapePath.RoundCap
               joinStyle: ShapePath.RoundJoin
               strokeColor: "transparent"
               fillColor:"transparent"
               startX: 100
               startY: 200

               PathLine{
                  x:50
                  y:250
               }

               PathArc
               {
                   x: 50
                   y: 50
                   radiusX: 142
                   radiusY: 142
                   direction: PathArc.Clockwise
               }

               PathLine{
                  x:100
                  y:100
               }

               PathArc
               {
                   x: 100
                   y: 200
                   radiusX: 71
                   radiusY: 71
                   direction: PathArc.Counterclockwise
               }

               PathLine{
                  x:50
                  y:250
               }
           }

           MouseArea {
               id: mouse_area_L
               anchors.fill: parent
               containmentMask: ctr_L
               hoverEnabled: true
               onPressed: {
                   parent.scale +=.1
               }
               onReleased: {
                   parent.scale -= .1
               }
           }
       }

       //to top
       Shape{
           id: ctr_T
           anchors.fill: parent
           anchors.centerIn: parent
           anchors.topMargin: -2
           containsMode: Shape.FillContains
           layer.enabled: true
           layer.samples: 16
           layer.smooth: true
           antialiasing: true

           Image {
               source: "qrc:/img/top.svg"
               sourceSize: Qt.size(300,300)
               anchors.centerIn: parent
               anchors.horizontalCenterOffset:6
               anchors.verticalCenterOffset: 3
           }

           ShapePath {
               capStyle: ShapePath.RoundCap
               joinStyle: ShapePath.RoundJoin
               strokeColor: "transparent"
               fillColor:"transparent"
               startX: 100
               startY: 100

               PathLine{
                  x:50
                  y:50
               }

               PathArc
               {
                   x: 250
                   y: 50
                   radiusX: 142
                   radiusY: 142
                   direction: PathArc.Clockwise
               }

               PathLine{
                  x:200
                  y:100
               }

               PathArc
               {
                   x: 100
                   y: 100
                   radiusX: 71
                   radiusY: 71
                   direction: PathArc.Counterclockwise
               }

               PathLine{
                  x:50
                  y:50
               }
           }

           MouseArea {
               id: mouse_area_T
               anchors.fill: parent
               containmentMask: ctr_T
               hoverEnabled: true
               onPressed: {
                   parent.scale +=.1
               }
               onReleased: {
                   parent.scale -= .1
               }
           }
       }

       //to center
       Shape{
           visible: false
           id: ctr_C
           anchors.fill: parent
           anchors.centerIn: parent
           containsMode: Shape.FillContains
           layer.enabled: true
           layer.samples: 32
           layer.smooth: true
           antialiasing: true

           ShapePath {
               capStyle: ShapePath.RoundCap
               joinStyle: ShapePath.RoundJoin
               strokeColor: "transparent"
               fillColor: "blue"
               startY: 81

               PathArc
               {
                   x: 81
                   y: 150
                   radiusX: 69
                   radiusY: 69
                   useLargeArc: true
                   direction: PathArc.Clockwise
               }

               PathArc
               {
                   x: 150
                   y: 81
                   radiusX: 69
                   radiusY: 69
                   useLargeArc: false
                   direction: PathArc.Clockwise
               }
           }

           MouseArea {
               id: mouse_area_C
               anchors.fill: parent
               containmentMask: ctr_C
               hoverEnabled: true
               onClicked: {
                   console.log('------回原点------')
               }
           }
       }
   }
}
